import { useState, forwardRef, useImperativeHandle, useId } from "react";
import { Drawer, Form, Input, Flex, Button } from "antd";
import { AddRole } from "@/api/modules/role";
import { message } from "@/hooks/useMessage";

const RoleDrawer = forwardRef((props: any, ref) => {
  useImperativeHandle(
    ref,
    () => {
      return { clickDrawer };
    },
    [],
  );
  // 抽屉
  const [openDrawer, setOpen] = useState(false);
  const clickDrawer = () => {
    setOpen((current) => !current);
  };

  const [form] = Form.useForm();
  const onFinish = () => {};
  const onFinishFailed = () => {};

  const submit = async () => {
    const params = form.getFieldsValue();
    try {
      const res = await AddRole(params);
      console.log("res", res);
    } catch (error: any) {
      message.error(error.toString());
    }
  };

  return (
    <Drawer
      title="新增角色"
      onClose={clickDrawer}
      open={openDrawer}
      styles={{ wrapper: { width: "70%" }, body: { height: "100%" } }}
    >
      <Form
        name={useId()}
        form={form}
        layout={"inline"}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        style={{ width: "100%", height: "calc(100% - 32px)" }}
        initialValues={props.initialState}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Flex gap={16} style={{ width: "100%" }}>
          <Form.Item key="roleName" name="roleName" label="角色名称">
            <Input />
          </Form.Item>
          <Form.Item key="menuStr" name="menuStr" label="角色菜单">
            <Input />
          </Form.Item>
        </Flex>
        <Form.Item noStyle>
          <div
            style={{
              width: "100%",
              height: "760px",
              backgroundColor: "#32bf7d",
            }}
          ></div>
        </Form.Item>
      </Form>
      <Flex
        justify="center"
        align="flex-end"
        gap={16}
        style={{ width: "100%" }}
      >
        <Button type="primary" onClick={() => submit()}>
          保存
        </Button>
        <Button onClick={() => clickDrawer()}>关闭</Button>
      </Flex>
    </Drawer>
  );
});

export default RoleDrawer;
